<template>
  <div class="ip_main">
    <div class="ip_content">
      <!-- 筛选条件 -->
      <div class="ipc_screen">
        <div class="scr_input">
          <div class="scr_left">
            <span class="scri_title">模糊搜索：</span>
            <div class="scri_inp">
              <el-input v-model="input" placeholder="请输入搜索关键词"></el-input>
            </div>
            <el-button type="primary" class="screenButton" style="height: 40px" @click="searchList">搜索</el-button>
            <el-button @click="resetAll">重置</el-button>
          </div>
          <div class="scr_right" @click="openScreenClick"><span v-html="openScreen?'收起':'展开'"></span><i :class="openScreen?'el-icon-arrow-down':'el-icon-arrow-up'"></i></div>
        </div>
        <div class="scr_time" v-if="openScreen">
          <div class="scrt_title">搜索时间：</div>
          <div class="chooseTime">
            <el-date-picker
              v-model="chooseTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
          <div class="choosePeoPle">
            <el-select v-model="choosePeo" placeholder="请选择责任人" id="choosePeo">
              <el-option
                v-for="item in peoples"
                :key="item.login"
                :label="item.firstName"
                :value="item.login">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <!-- 内容 -->
      <div class="ip_con">
        <div class="ipc_scrs">
          <div class="title">共搜索到 {{searchListsLength}} 条数据</div>
        </div>
        <div class="ipc_buttons">
          <div class="buttons">
            <el-button type="primary" class="buts" @click="addPresentation"><i class="el-icon-plus"></i> 添加8D报告</el-button>
            <div class="radios">
              <el-radio v-model="stateRadio" @change="searchList" label="1">已解决</el-radio>
              <el-radio v-model="stateRadio" @change="searchList" label="2">未解决</el-radio>
              <!--<el-radio v-model="stateRadio" @change="searchList" label="3">暂停</el-radio>-->
            </div>
            <div id="clear" v-if="stateRadio != 0" @click="clearState">清空筛选</div>
          </div>
          <div class="pages" v-if="searchListsLength > 0">
            <el-pagination
              background
              prev-text="上一页"
              next-text="下一页"
              layout="prev, pager, next"
              :current-page="filterParams.page + 1"
              :page-size="filterParams.size"
              :total="searchListsLength"
              @current-change="currentChange">
            </el-pagination>
          </div>
        </div>
        <!-- 问题列表 -->
        <div class="ipc_content" v-if="searchLists.length > 0">
            <div class="icc_icons" @click="toDetail(item)" v-for="(item,index) in searchLists" :key="index">
              <div class="ii_titile">
                <div class="title">{{item.edReport.title}}</div>
              </div>
              <div class="labels">
                <div class="label label1" v-if="item.edReport.level == 1">红色</div>
                <div class="label label2" v-if="item.edReport.level == 2">橙色</div>
                <div class="label label3" v-if="item.edReport.level == 3">黄色</div>
                <div class="label label4" v-if="item.edReport.level == 4">蓝色</div>
                <div class="label label5">{{item.edReport.target}}</div>
              </div>
              <div class="ii_bottom">
                <div class="introduction">最新时间: {{timestampToTime(item.edReport.createTime)}}　负责人: {{item.edReport.creator}}</div>
                <div class="node">{{item.edReport.stage}}</div>
                <div class="node node_end" v-if="item.edReport.stage=='D8' && item.edReport.status=='close'">已结束</div>
              </div>
            </div>
        </div>
        <div class="ipc_content_none" v-else>
          <div class="cn_con">
            <div class="cnc_img"><img src="../../../assets/imgs/nullIcon.png"/></div>
            <div class="cnc_span">暂无数据</div>
          </div>
        </div>
      </div>
    </div>
    <plant v-if="showNewEight"></plant>
    <router-view></router-view>
  </div>
</template>

<script>
  import plant from '../important/8D_1'
  import qs from 'qs'
  import {mapGetters,mapActions} from 'vuex'
  export default {
    name: "importantIndex",
    data() {
      return {
        input:'',
        openScreen:true,
        chooseTime: '',
        choosePeo: '',
        peoples: [],
        searchListsLength: 0,
        stateRadio: '0',
        filterParams:{
          page: 0,
          size: 9,
          type:'8D'
        },
        searchLists:[],
      }
    },
    computed:{
      ...mapGetters([
        'showNewEight'
      ])
    },
    components:{
      plant,
    },
    created() {
      let self = this
      //获取责任人
      self.$http.get(self.conURL + 'api/users').then(res => {
        self.peoples = res.data
        self.peoples.unshift({firstName:'所有责任人',login:''})
      })
    },
    mounted() {
      let self = this
      self.searchList()
    },
    methods: {
      ...mapActions([
        'upstate'
      ]),
      //时间戳转换成时间
      timestampToTime(timestamp) {
        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
        return Y + M + D;
      },
      //展开或者收起
      openScreenClick(){
        let self = this
        self.openScreen = !self.openScreen
      },
      //查询列表
      searchList(){
        let self = this
        if (self.input != ''){ //关键字
          self.filterParams["key"] = self.input;
        }
        if (self.choosePeo != ''){ //责任人
          self.filterParams["creator"] = self.choosePeo;
        }
        if (self.chooseTime != '' && self.chooseTime != null){ //开始/结束时间
          self.filterParams["begin"] = self.chooseTime[0].getTime()/1000
          self.filterParams["end"] = self.chooseTime[1].getTime()/1000
        }
        let status = '' //筛选按钮
        switch (self.stateRadio) {
          case '0':
            status = ''
            break
          case '1':
            status = 'close'
            break
          case '2':
            status = 'open'
            break
        }
        self.filterParams["statuss"] = status;
        self.$http.get(self.conURL + 'mongo/api/edReports/detail?' + qs.stringify(self.filterParams) + '').then(res => {
          self.searchLists = res.data.content
          self.searchListsLength = res.data.totalElements
        })
      },
      //重置
      resetAll(){
        let self = this
        self.input = ''
        self.chooseTime = ''
        self.choosePeo = ''
        self.searchList()
      },
      //清空筛选
      clearState(){
        let self = this
        self.stateRadio = '0'
        self.searchList()
      },
      //添加8D报告
      addPresentation(){
        let self = this
        self.upstate({key:'showNewEight',val:true})
      },
      //查看详情
      toDetail(obj){
        let self = this
        this.$router.push({
          path:'/index/public_eightD',
          query:obj
        })
      },
      //分页变化
      currentChange(par){
        let self = this
        self.filterParams.page = par - 1
        self.searchList()
      },
    }
  }
</script>

<style lang="less">
  .ip_main{
    width: 100%;
    height: 100%;
    padding: 43px 62px;
    padding-bottom: 0;
    box-sizing: border-box;
    .ip_content{
      width: 100%;
      height: 100%;
      background: #fff;
      border: 1px solid #e5e5e5;
      border-radius: 5px;
      /* 筛选条件 */
      .ipc_screen{
        display: flex;
        flex-direction: column;
        padding: 30px 23px;
        box-sizing: border-box;
        width: 100%;
        border-bottom: 1px solid #e5e5e5;
        .scr_input{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          height: 40px;
          .scr_left{
            width: calc(100% - 60px);
            display: flex;
            flex-direction: row;
            .scri_title{
              font-size: 14px;
              color: #666666;
              line-height: 40px;
              margin-right: 12px;
            }
            .scri_inp{
              width: 52.46%;
              margin-right: 20px;
            }
            .screenButton{
              margin-right: 10px;
            }
          }
          .scr_right{
            font-size: 16px;
            color: #0f76c8;
            line-height: 30px;
            cursor: pointer;
            span{
              margin-right: 10px;
            }
          }
        }
        .scr_time{
          margin-top: 15px;
          width: 100%;
          height: 40px;
          display: flex;
          flex-direction: row;
          .scrt_title{
            font-size: 14px;
            color: #666666;
            line-height: 40px;
            margin-right: 12px;
          }
          .chooseTime{
            width: 29.18%;
            margin-right: 20px;
          }
          .choosePeoPle{
            width: 20%;
          }
        }
      }
      /* 内容 */
      .ip_con{
        display: flex;
        flex-direction: column;
        .ipc_scrs{
          display: flex;
          flex-direction: column;
          padding-left: 23px;
          box-sizing: border-box;
          .title{
            font-size: 16px;
            color: #0f76c8;
            width: 100%;
            height: 55px;
            line-height: 55px;
          }
        }
        .ipc_buttons{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          flex-wrap: wrap;
          padding: 0 23px;
          padding-bottom: 30px;
          box-sizing: border-box;
          .buttons{
            display: flex;
            flex-direction: row;
            .buts{
              margin-right: 10px;
            }
            .radios{
              display: flex;
              flex-direction: row;
              label{
                margin-top: auto;
                margin-bottom: auto;
              }
            }
            #clear{
              height: 30px;
              line-height: 30px;
              text-align: center;
              background: #fafafa;
              color: #666666;
              font-size: 14px;
              margin-left: 15px;
              padding: 0 10px;
              cursor: pointer;
              border: 1px solid #e5e5e5;
              border-radius: 5px;
            }
          }
        }
        /* 问题列表 */
        .ipc_content{
          width: 100%;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          padding: 0 22px;
          box-sizing: border-box;
          .icc_icons{
            width: 31%;
            height: 120px;
            border: 1px solid #eeeeee;
            border-radius: 5px;
            box-shadow: #f8f8f9 0px 0px 15px;
            margin-top: 20px;
            margin-right: 2%;
            padding: 23px 20px;
            box-sizing: border-box;
            cursor: pointer;
            .ii_titile{
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              margin-bottom: 12px;
              .title{
                font-size: 20px;
                line-height: 20px;
                color: #222222;
                max-width: 80%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            .labels{
              display: flex;
              flex-direction: row;
              margin-bottom: 12px;
              .label{
                height: 16px;
                line-height: 16px;
                text-align: center;
                padding: 2px 5px;
                color: #fff;
                border-radius: 2px;
                margin-right: 6px;
                font-size: 12px;
              }
              .label:last-child{
                margin-right: 0;
              }
              .label1{
                background: #dc4444;
              }
              .label2{
                background: #ff8c1b;
              }
              .label3{
                background: #ffcd34;
              }
              .label4{
                background: #3384dd;
              }
              .label5{
                background: #3384dd;
              }
              .label6{
                background: rgb(168, 168, 168);
              }
            }
            .ii_bottom{
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              .introduction{
                font-size: 14px;
                color: #666666;
                line-height: 14px;
                max-width: 80%;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
              }
              .node{
                font-size: 22px;
                line-height: 14px;
                color: #3572bd;
              }
              .node_end{
                font-size: 18px;
                color: #999999;
              }
            }
          }
          .icc_icons:nth-child(1),.icc_icons:nth-child(2),.icc_icons:nth-child(3){
            margin-top: 0;
          }
        }
        .ipc_content_none{
          padding-top: 165px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .cn_con{
            display: flex;
            flex-direction: column;
            margin: auto;
            .cnc_img{
              width: 68px;
              height: 68px;
              margin-left: auto;
              margin-right: auto;
              margin-bottom: 28px;
              img{
                width: 100%;
                height: 100%;
              }
            }
            .cnc_span{
              font-size: 22px;
              color: #cccccc;
              text-align: center;
            }
          }
        }
      }
    }
  }
</style>
